/***
  分享组件的封装
 *// 
<template>
        <div class="share_mask" v-show="isVisible" @click="share">
            <div class="share_line">
                <span></span>
                <img src="http://img.ruthus.com/activies/mfAct/sharelight.png" alt="">
            </div>
            <div class="phone">
                <img src="http://img.ruthus.com/activies/mfAct/phone.png" alt="">
                <p>感谢您的参与<br>快把这份幸运传递给朋友们吧~</p>

            </div>
        </div>
</template>
<script>
export default {
  props: ["isshare"],
  data() {
    return {
      isVisible: this.isshare
    };
  },
  watch: {
      isshare(val) {
            this.isVisible = val; //②监听外部对props属性isshare的变更，并同步到组件内的data属性urls中
        }
  },
  methods: {
    share() {
      this.isVisible = false;
    }
  }
};
</script>
<style lang="stylus" scoped>
    .share_mask{
        width: 100%;
        height: 36rem;
        position: fixed;
        top:0;
        background: #101010e8;
        z-index: 9;
    }
    .share_mask .share_line{
        position: absolute;
        top:0px;
        right: 0;
        z-index: 9;
        width: 200px;

    }
    .share_mask .share_line>span{
        width: 4px;
        height: 4px;
        border-radius: 30%;
        background-color: #fff;
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        display: inline-block;
        z-index: 8;
        -webkit-animation: sroll 3s infinite;
        animation: sroll 3s infinite;
    }
    @keyframes sroll {
        0% {
            transform: translate(0px, 0px);
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
        100% {
            opacity: 0.3;
            transform: translate(180px ,-200px);
        }
    }
    @keyframes scaol {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.05);
            opacity: 0.7;
        }
        80% {
            transform: scale(1.03);
            opacity: 0.75;
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
    .share_mask .share_line>img{
        width: 100%;
        animation: scaol 1.5s infinite;
    }
    .share_mask .phone{
        position: absolute;
        top: 130px;
        left: 50%;
        margin-left: -100px;
        z-index: 9;
        width: 200px;
    }
    .share_mask .phone>img{
        width: 200px;
    }
    .share_mask .phone>p{
        color: #fff;
        text-align: center;
        font-size: .24rem;
        line-height: .7rem;
    }
</style>
